<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
            <!-- 3.登入页面
    用户名输入框,
    密码输入框,
    提交按钮,
    任务 3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’    --> 
    <form action="" name="myform">
        <table align="center">
            <tr>
                <td>
                    用户名：<input type="text" name="name" onfocus="a()" onblur="a1()">
                </td>
            </tr>
            <tr>
                <td>
                    密&nbsp&nbsp&nbsp&nbsp码：<input type="password" name="pwd"
                    onfocus="b()" onblur="b1()">
                </td>
            </tr>
            <tr>
                <td><input type="submit" value="提交" onclick="ab()"></td>
            </tr>
        </table>
    </form>
    <!-- 4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。  -->
        <div style="width: 300px;height: 300px;background-color: rosybrown;" id="onc">
            <span>广电电视机</span>
        </div>

        <input type="button" value="添加监听" onclick="num1()">
        <input type="button" value="清除监听" onclick="num2()">

</body>
    <script>
        // 3
        function a(){
            console.log('用户在输入名称');
        }
        function b(){
            console.log('用户在输入密码');
        }
        function a1(){
            var username=document.myform.name.value;
            if (username==''){
                alert('没有输入用户名');
                return false;
            }
        }
        // var pwds=document.myform.pwd.value;
        function b1(){
             var pwds=document.myform.pwd.value
            if (pwds==''){
                alert('没有输入密码'); 
            }
        }
        function ab(){
             var username=document.myform.name.value;
             var pwds=document.myform.pwd.value;
            if (username=='' && pwds==''){
                alert('用户名和密码为空');
                return;
            }else if(username == ''){
                alert('用户名为空');
                return;
            }else if(pwds==''){
                alert('密码为空');
            }
            return false;
        }

        ///////////////////////////////////////////////////

        function sun(){
            console.log('鼠标移动事件');            
        }
        function num1(){
            document.getElementById('onc').addEventListener('mousemove',sun);
        }
        function num2(){
            document.getElementById('onc').removeEventListener('mousemove',sun);
        }

    </script>
</html>